
<template>
    <div>      
        <h1>证书管理</h1>
            <Table :columns="columns1" :data="data1"></Table>
            <router-link to="addService">
            </router-link>
        <h1>模板详情</h1>
        <div id="img" v-on:click="click" hidden="true" class="center">
            <img id="img1" />
        </div> 
    </div>
</template>
<script>
export default {
    data() {
        return {
            columns1: [
                {
                    title: "模板名称",
                    key: "name"
                },
                {
                    title: "模板",
                    key: "templet_url",
                    render: (h, params) => {
                        return h('div', {
                            attrs: {
                                style: 'width: 100px;height: 60px;'
                            },
                            on:{
                                click: ()=>{                                   
                                    let div = document.getElementById("img");                                  
                                    div.hidden = false;                         
                                    let img = document.getElementById("img1");
                                    img.src = params.row.templet_url; 
                                    img.style = "width:500px;height:720px";                                                            
                                }
                            }
                        }, 
                        [
                            h('img', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                attrs: {
                                    src: params.row.templet_url, style: 'width: 100px;height: 60px;border-radius: 2px;'
                                },
                                style: {
                                },
                                
                            }),
                        ]);
                    }
                },
                {
                    title: "编辑",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                },
                                "删除"
                            ),
                             h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                        ]);
                    }
                }
            ],
            data1: [
                // {
                //     name: "John Brown",
                //     age: 18,
                //     address: "New York No. 1 Lake Park",
                //     date: "2016-10-03"
                // },
                // {
                //     name: "Jim Green",
                //     age: 24,
                //     address: "London No. 1 Lake Park",
                //     date: "2016-10-01"
                // },
                // {
                //     name: "Joe Black",
                //     age: 30,
                //     address: "Sydney No. 1 Lake Park",
                //     date: "2016-10-02"
                // },
                // {
                //     name: "Jon Snow",
                //     age: 26,
                //     address: "Ottawa No. 2 Lake Park",
                //     date: "2016-10-04"
                // }
            ]
        };
    },
    mounted() {
        let mid = localStorage.getItem("mid");
        if (mid == 'undefined' || mid == ''){
            alert("您还没有登陆");
            this.$router.push("admin");
            return;
        }
        if (mid.indexOf('2') < 0){
            alert("您没有权限");
            return;
        }  
        let qs = require('qs');
        this.axios({
            method: "post",
            url: `${this.adminUrl}/getTemplet`,
            //url: `${this.siteUrl}/getInvitation`,
            data: qs.stringify({})
            }).then(response => {
                if ((response.data.result == 200)) {
                    this.data1 = response.data.data;
                }else{
                    alert("请求失败");
                }
            }).catch(err =>{
                console.log(err);
        });
    },
    methods:{
        click(){
            let div = document.getElementById("img");
            div.hidden = true;                       
        },
        show(index) {
            let div = document.getElementById("img");                                  
            div.hidden = false;                         
            let img = document.getElementById("img1");
            img.src = `${this.data1[index].templet_url}`; 
            img.style = "width:500px;height:720px";
            
            
        },
        remove(index) {
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/updateTemplet`,
                //url: `${this.siteUrl}/getInvitation`,
                data: qs.stringify(
                    {uid:`${this.data1[index].name}`, status:1}
                    )
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.data1.splice(index, 1);
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        }
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
    margin-bottom: 20px;
    margin-top:20px;
}
button {
    margin-top: 50px;
}
.center{
    position: absolute;
    margin: 0 auto;
    align-self: center;
    top: 8%;
    left: 30%;
    z-index: 1;
}
</style>
